<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
    #topBox{
        width: 100px;
        height: 25px;
        color: white;
        background-color: chartreuse;
        /* background:#f00;
        position:fixed;
        top:-100px;
        left:0;
        width:100%;
        font-size:50px;
        font-weight:bold;
        text-align: center;
        line-height:100px; */
    }
    #back{
        width: 100px;
        height: 25px;
        color: white;
        text-align: center;
        background-color: pink;
        /* width:100px;
        height:100px;
        color: #f00;
        background-color: #abcdef;
        position:fixed;
        right:20px;
        bottom:50px;
        display:none; */
    }
</style>
</head>
<body>
<div id="topBox">
    顶部通栏广告
</div>
<p style="width:20px;">
    锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。
    床前明月光，疑是地上霜。举头望明月，低头思故乡。
    
    离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
</p>
<div id="back">
    回到顶部
</div>
<script>
    var times;
    document.querySelector('#back').onclick=function(){
        times=setInterval(function(){
            var gao=document.documentElement.scrollTop
            if(gao<=0){        
            }else{
                document.documentElement.scrollTop=gao-10

            }
        },10)
    }
    // document.querySelector('#back').onclick = function(){
    //         document.documentElement.scrollTop = 300;
    //     }
</script>
</body>
</html>
<!-- 当滚动距离达到300px时显示出顶部公共
	// 2、当滚动距离达到350px是显示回到顶部 -->